<template>
    <div class="main">
    <div class="recruit_banner"></div>
    <div class="base_title">
        <div class="line"></div>
        <div class="title_text">
          <p class="main_title">广交天下牛人</p>
          <p class="subhead">Make The Cattle People In The World</p>
        </div>
        <div class="line"></div>
    </div>
    <div class="recruit_article">
      <div class="recruit_left">
        <h3 class="main_title">01</h3>
        <p class="subhead">Product Manager</p>
        <p class="tag"><i></i><span>产品经理</span></p>
      </div>
      <div class="recruit_right">
        <ul class="info_list">
          <li class="info_title"><i>01.</i>职务描述：</li>
          <li>1. 使用原型、流程图、PRD等方法将需求转化成可供开发使用的文档；</li>
          <li>2. 负责微信、WEB产品的设计和用户交互；持续优化其产品易用性；</li>
          <li>3. 能够撰写逻辑严密可操作性强的产品需求文档；</li>
          <li>4. 通过产品调研、数据分析、竞品跟踪，深入了解市场与用户需求；</li>
          <li>5. 能够对研发结果进行验收性测试，对产品数据进行跟踪与研究，分析运营效果，制定产品优化策略。</li>
          <li></li>
        </ul>
        <ul class="info_list">
          <li class="info_title"><i>02.</i>资历要求：</li>
          <li>1. 使用原型、流程图、PRD等方法将需求转化成可供开发使用的文档；</li>
          <li>2. 负责微信、WEB产品的设计和用户交互；持续优化其产品易用性；</li>
          <li>3. 能够撰写逻辑严密可操作性强的产品需求文档；</li>
          <li>4. 通过产品调研、数据分析、竞品跟踪，深入了解市场与用户需求；</li>
          <li>5. 能够对研发结果进行验收性测试，对产品数据进行跟踪与研究，分析运营效果，制定产品优化策略。</li>
        </ul>
      </div>
       <div class="pagination">
        <a href="javascript:" class="left_arrow"></a>
        <a href="javascript:" class="right_arrow"></a>
      </div>
    </div>
    </div>
</template>

<script>
    export default {
    };
</script>
<style lang="less"  rel="stylesheet/less" type="text/less">
  .main {
    height: 100%;
  }
.recruit_banner {
    width: 100%;
    height: 14rem;
    background: url('../assets/recruit.png') no-repeat;
    background-size: 100% 100%;
}
.base_title {
    width: 14rem;
    margin: 1rem auto;
    display: flex;
    .line {
      flex: 1;
      border-top: 0.05rem solid #333333;
      margin-top: 1rem;
    }
}
.title_text p{
  margin: 0;
  color: #333333;
  line-height: 1.5rem;
  text-align: center;
}
.title_text .main_title {
  font-size: 1.5rem;
}
.title_text .subhead {
  font-size: 0.7rem;
}
.recruit_article {
  display: flex;
  width: 49rem;
  margin: 0 auto 3rem;
  position: relative;
}
.recruit_left {
  width: 16rem;
  padding-right: 1rem;
  border-right:0.05rem solid #EA2727;
  position: relative;
}
.main_title {
  margin: 0;
  font-family: MFLiHei_Noncommercial-Regular;
  font-size: 2.5rem;
  color: #EB2727;
  text-align:right;
  font-weight: bold;
  line-height: 2.8rem;
}
.subhead {
  margin: 0;
  font-family: MFLiHei_Noncommercial-Regular;
  font-size: 1.2rem;
  color: #333333;
  text-align: right;
  line-height: 2rem;
}
.tag {
  margin: 0;
  font-size: 1.2rem;
  color: #424242;
  text-align: right;
  line-height: 1.8rem;
}
.info_list {
    margin: 0 1rem;
    width: 33rem;
    list-style: none;
    padding: 1rem 0;
    border-bottom: 0.05rem solid #E9E9E9;
    &:last-child {
      border-bottom: none;
    }
    li {
      font-size: 0.7rem;
      color: #151515;
      line-height: 1.25rem;
    }
}
.info_title {
  font-size: 0.7rem;
  color: #151515;
  i {
      font-size: 0.9rem;
      font-weight: bold;
    }
}
.pagination {
  width: 3rem;
  position: absolute;
  bottom: 0;
  left: 11rem;
  .right_arrow ,.left_arrow {
      position: relative;
      display: inline-block;
      width: 1.25rem;
      height: 0.85rem;
      background: #fff;
      border: 0.05rem solid #EA2727;
    }
}
.pagination .left_arrow {
  right: 0.7rem;
  bottom: 0.9rem;
}
.pagination .right_arrow {
  right: 1rem;
}
.active {
  background: #EA2727!important;
}
.pagination .left_arrow::after {
  border: 0.25rem solid transparent;
  border-right: 0.25rem solid #EA2727;
  width: 0;
  height: 0;
  position: absolute;
  right: 50%;
  top: 50%;
  margin-right: -0.125rem;
  margin-top: -0.25rem;
  content: ' '
}
.pagination .right_arrow::after {
  border: 0.25rem solid transparent;
  border-left: 0.25rem solid #EA2727;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -0.125rem;
  margin-top: -0.25rem;
  content: ' '
}
.left_active::after {
  border-right-color: #fff!important;
}
.right_active::after {
  border-left-color: #fff!important;
}
</style>
